<template>
  <div class="fee-account">
    <ContentTitle :info="info" />
    <div class="rule bg-fff pl-30 pt-10 pb-10">
      <p class="mb-10">
        <i class="iconfont icon-gantanhao"></i>
        <span>目前计费功能暂不完善，所以计费功能暂未正式启用。</span>
      </p>
      <p class="mb-10">
        <i class="iconfont icon-gantanhao"></i>
        <span
          >正式收费后，我们将发送通知至首页公告；在此期间，若有欠费情况可联系我们：发送邮件至</span
        >
        <span class="blue">sensecap@seeed.cc</span>
      </p>
      <p class="">
        <span class="blue">点击查看具体收费规则</span>
      </p>
    </div>
    <el-card class="box-card mt-10">
      <template #header>
        <div class="card-header f13">
          <i class="iconfont icon-gantanhao"></i>
          <span class="ml-5">设备概览</span>
        </div>
      </template>
      <p class="mt-10 ml-10">
        <strong>计划:</strong>
        <span class="ml-30">按量付费</span>
      </p>
      <p class="mt-20 mb-30 ml-10">
        <strong>状态:</strong>
        <span class="ml-30">正常</span>
      </p>
    </el-card>
    <el-card class="box-card mt-10">
      <template #header>
        <div class="card-header f13">
          <i class="iconfont icon-gantanhao"></i>
          <span class="ml-5">设备概览</span>
        </div>
      </template>
      <p class="mt-10 ml-10">
        <span class="text1">账户余额:</span>
        <span class="ml-30">0.00</span>
      </p>
      <p class="mt-20 mb-30 ml-10 flex aic">
        <span class="text1">充值金额:</span>
        <el-input placeholder="请输入充值金额" /> 
      </p>
      <p class="mt-20 mb-30 ml-10 flex aic">
        <span class="text1 text2">备 注:</span>
        <el-input placeholder="请输入备注信息" /> 
      </p>
      <button class="but bg-blue fff" @click="open">充值</button>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ContentTitle from "@/components/ContentTitle.vue";
import { ElMessage } from 'element-plus'
const info = ref({
  type: "计费",
  text: "账户信息",
  msg: "展示当前账户的剩余消息额度，可根据兑换码兑换消息额度。",
});
const open = () => {
  ElMessage({
    message: '充值成功',
    type: 'success',
  })
}
</script>

<style lang="less">
.fee-account {
  .rule {
    .iconfont {
      color: #ffa500;
      font-size: 22px;
      font-weight: bold;
      margin-right: 5px;
    }
  }
  .card-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px;
  }
  .text1{
    font-weight: bold; 
    width: 80px;
  }
  .but{
    border: none;
    width: 80px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    font-size: 16px;
  }
  .el-input__wrapper{
    flex-grow: 0;
  }
}
</style>